<template>
	<div class="smallMenu" >
		<div class="flipper">
			<div class="front"  :class="[name,{active : count > 0}]" >
			</div>
			<div class="back">
				{{back}}
				
			</div>
		</div>
		<div v-if="app==true" class="app-box"></div>
	</div>
</template>
<script>
	export default{
		name:'smallMenu',
		props:['name','back','app','count']
	}
</script>
<style lang="stylus" scoped>
	.smallMenu
		cursor pointer
		width 40px
		height 40px
		border 1px solid #dcdcdc
		background-color #fff
		margin-bottom 2px
		perspective 1000
		position  relative
		.count
			position absolute
			top 13px
			left 28px
			width 4px
			height 4px
			border-radius 50%
			background #ef4b4b
		>.app-box
			position absolute
			width 160px
			height 160px
			bottom -4px
			right 56px
			transition opacity .25s,transform .3s
			opacity 0
			max-width 0
			transform scale(.01)
			transform-origin 100% 95%
			background url('./img/app-box.jpg') no-repeat
			background-size cover
		&:hover
			.count
				display none
			>.app-box
				opacity 1
				transform scale(1)
				max-width 172px

	.flipper
		transform-style  preserve-3d
		transition  0.6s
		width 40px
		height 40px
	.front
		for item in box edit mesage pao stick
			&.{item}
				background-image 'url(./img/%s.png)' % item 
				background-repeat no-repeat
				background-position center center
				// background-size contain
		&.active
			animation shanshuo 0.65s infinite
	.front
	.back 
		width 40px 
		height 40px
		backface-visibility  hidden
		position  absolute
		top  0
		left  0
		color red
	.front 
		z-index 2
	.back 
		font-size 12px
		transform rotateY(180deg)
		text-align center
		padding 5px
		box-sizing border-box
	.smallMenu:hover
		.flipper
			transform rotateY(180deg)
		

@keyframes shanshuo {
	0%{
		opacity 0
	}
	100%{
		opacity 1
	}
}
	      
</style>